<template>
  <div class="friendscontainer">
    <div class="newfriend"
         @click="newFriendEvent">
      <span>新朋友</span>

    </div>
    <el-menu unique-opened
             style="border-right:0">
      <el-submenu v-for="item in friendList"
                  :key="item.groupName"
                  :index="item.groupName">
        <template slot="title">
          <span>{{item.groupName}}</span>
        </template>
        <el-menu-item v-for="it in item.friendInfos"
                      :key="it.loginID"
                      @click="reviseToUser(it)">
          <el-avatar :src='it.avatar'
                     size='small'></el-avatar>
          <span>{{it.nickName}}</span>
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: 'Friends',
  props: ['friendList'],
  methods: {
    newFriendEvent () {
      this.$emit('newfriend')
    },
    reviseToUser (toInfo) {
      this.$emit('reviseToUser', toInfo)
    }
  },
  data () {
    return {
    }
  }
}
</script>

<style lang="less" scoped>
.friendscontainer {
  position: relative;
  width: 100%;
  height: 530px;

  .newfriend {
    margin: 5px 20px;
    font-size: 14px;
    cursor: pointer;
  }
}

.dot {
  position: absolute;
  left: 5px;
  top: 0;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  background-color: #ff0000a6;
}
</style>
